<template>
  <div id="app">
    {{ $store.state.count }}
    <button @click="add">加1</button>
    <button @click="reduce">减1</button>
    共{{ $store.getters.proLen }} 条数据
    <ul>
      <li v-for="item of $store.state.proList" :key="item.proid">
        {{ item.proname }}
      </li>
    </ul>
    <hr>
    <HelloWorld />
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
import { mapActions } from 'vuex'
export default {
  components: {
    HelloWorld
  },
  mounted () {
    console.log(this.$store)
    // this.$store.dispatch('getProListData')
    this.getProlistDataAction()
  },
  methods: {
    ...mapActions({
      getProlistDataAction: 'getProListData'
    }),
    add () {
      // 显示提交mutation
      this.$store.commit('updateCount', this.$store.state.count + 1)
    },
    reduce () {
      // 显示提交mutation
      this.$store.commit('updateCount', this.$store.state.count - 1)
    }
  }
}
</script>
